<template>
  <!-- showReceivingCoupon -->
    <div class="zong" v-if='homeGoodCoupon.length>0'>
    	<div class="hotBollTop">
    		<h3 class="hotBollTopTit">热门商圈 
    			<span v-if="false">全部商户></span>
    			
    		</h3>
    		<div class="hotBollTopContent">{{homeGoodCouponParameter.tradingAreaMchtName}} - {{homeGoodCouponParameter.tradingAreaAddr}}</div>
    		<div v-if="!homeGoodCouponParameter.GreaterSix" class="hotBollTopNum"><div class="swiper-pagination"></div></div>
    		<!--<div class="hotBollTopNum" v-if="homeGoodCouponParameter.GreaterSix"><span> </span><span>查看更多商圈></span></div>-->
    	</div>
    	
    	 <swiper v-if="!homeGoodCouponParameter.GreaterSix" :options="swiperOption" ref="mySwiper">
                <!-- slides -->
       <swiper-slide v-for="item in homeGoodCoupon" :key="item">
       	 <div style="margin-left: 1rem;" id="content" :class="{'marginleft':!homeGoodCouponParameter.numOne,'marginleft2':homeGoodCouponParameter.numOne}"  @click="goMcht(item)">
             	
             	<div class="pic_content"><img class="pic_content" v-lazy="item.mchtLogUrl"/></div>
                <div class="tabTxt">
                <div class="card_heard">
      <p class="mcht">
        <span class="mcht_name">{{item.mchtName}}</span>
      </p>
      <p class="type">
        <span class="type_name">{{item.mchtTypeValue}}</span>
        <star :couponComScore="item.mchtComScore" class="type_star_left"></star>
        <span class="type_comment">{{item.mchtComScore}}条</span>
      </p>
     </div>
          <button @click.stop="findCoupon(item)">
          	<span><i style="position: relative;top: .1rem;" class="iconfont icon-sou"></i></span>
          	<span>查看优惠券</span>
          </button>
      </div>
            </div>  	
      </swiper-slide>
                
      </swiper>
         <swiper v-if="homeGoodCouponParameter.GreaterSix" :options="swiperOption2" ref="mySwiper">
                <!-- slides -->
       <swiper-slide  v-for="item in homeGoodCoupon" :key="item">
             <div class="tab2Content" @click="goMcht(item)">
                	<img v-lazy="item.mchtLogUrl"/>
                	<div class="tab2ContentTxt">{{item.mchtName}}</div>
             </div>
        </swiper-slide>
                
      </swiper>
    </div>

</template>

<script>
		require('swiper/dist/css/swiper.css')
    import star from '../global/star.vue';
    import {Storage} from 'src/utils/storage.js'
    import getData4 from '../../service/getData4.js'
    import {socket} from '../../utils/socket'
    import { mapState} from 'vuex'

    export default {
        data: () => ({
//      	num:1,
  				swiperOption: {
          autoplay: false,
          direction : 'horizontal',
          pagination : '.swiper-pagination',
          paginationType : 'fraction',
          loop:false,
          width:window.innerWidth*0.95,
          preventClicks  : false,
        },
        	swiperOption2: {
          autoplay: false,
          direction : 'horizontal',
          pagination : '.swiper-pagination',
          paginationType : 'fraction',
          loop:false,
          width:window.innerWidth*0.95,
          preventClicks  : false,
          slidesPerColumn : 2,
          slidesPerView : 2,
        },
        }),
        props:{
        	homeGoodCoupon: {
		      type: Array,
		      default: () => []
		     },
		     num:[String],
		     homeGoodCouponParameter:{
		     	type: Object,
		      default: () => ({
						   tradingAreaMchtName:'',//商券名字
						   tradingAreaAddr:'',//商券地址
						   numOne:'',//商券是否只有一个商户
						   GreaterSix:''//大于6的样式 
			      })
		     },
       },
        components: {
            star
        },
        methods: {
        	 goMcht(item) {
        	 	 this.$router.push({path: '/merchDetail',query:{mchtId:item.mchtId}})
				    },
          findCoupon(info){
            Storage.set("oneCouponMer", info, true);
		        this.$router.push({
		          'path': '/businessCoupon/' + info.mchtId
		        });
          }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo //用户信息
            }),
            swiper() {
                return this.$refs.mySwiper.swiper
            }

        },
        beforeRouteLeave(to, from, next) {
            next();
        },
    };
</script>

<style lang="scss" scoped>
     .marginleft{
     	margin-left: 1rem;
     }
     .marginleft2{
     	margin-left: 2.5rem;
     }
 
     .zong{
     	width: 100%;
     	/*height: 100%;*/
     	background: #ffffff;
     	margin: .7rem auto;
     	& ::-webkit-scrollbar{
				  display:none;
				}
     }
     .hotBollTop{
     	width: 100%;
     	height: 5rem;
     	line-height: 1.5rem;
     	position: relative;
     	padding: 1rem;
     	.hotBollTopTit{
    margin-bottom:0.4rem; 		
     		span{
     			font-size: 1rem;
     			color: #666666;
     		}
     	}
     	.hotBollTopContent{
     		font-size: .9rem;
     			color: #666666;
     	}
     	.hotBollTopNum{
     		position: relative;
     		
     		left: 90%;
     		width: 3rem;
     		& span:nth-of-type(1){
     			font-size: 1.9rem;
     		}
     		& span:nth-of-type(2){
     			color: #666666;
     		}
     	}
     }
   /*tab栏*/

    .homeGoodCouponCarouselTab{
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .homeGoodCouponCarouselTab ul{
       display: -webkit-inline-box;
       padding-left: .3rem;
    }
    #content,.homeGoodCouponCarouselTab li{
        /*float: left;*/
        /*width:23rem;*/
        font-size: 1rem;
        height: 14rem;
        /*position: relative;*/
        .pic_content{
        	width: 100%;
        	height: 10rem;
        	background: salmon;
        }
        .tabTxt{
        	width: 100%;
        	height: 4rem;
        	background: #FFFFFF;
        	position: absolute;
        	/*line-height: 1.6rem;*/
        	&.coupon_info_item{
        		width:100%;
        	}
        & button{
        	position: absolute;
        	right: 1rem;
        	top: 30%;
        	color: #ffffff;
        	background: #FFFFFF;
        	height: 1.6rem;
        	line-height: 1.3rem;
        	font-family: "Microsoft YaHei";
        	font-size: .8rem;
        	padding:0 .3rem;
        	/*border: 1px solid #ec4e8a;*/
        	border-radius: .3rem;
        	background: #ec4e8a;
        }
        }
        .card_heard {
      width: 100%;
      position: relative;
      p {
        &.mcht {
        	overflow: hidden;/*内容超出后隐藏*/
			text-overflow: ellipsis;/* 超出内容显示为省略号*/			
			white-space: nowrap;/*文本不进行换行*/
			margin-top: .5rem;
          span.mcht_name {
            font-family: "Microsoft YaHei";
          }
          span.mcht_location {
            font-family: "Microsoft YaHei";
            float: right;
          }
        }
        &.type {
        	overflow: hidden;/*内容超出后隐藏*/
			text-overflow: ellipsis;/* 超出内容显示为省略号*/			
			white-space: nowrap;/*文本不进行换行*/
          span.type_name {
            font-family: "Microsoft YaHei";
            margin-right:10px;
            float: left;
            font-size: .8rem;
            color: #666;
            position: relative;
            top: .1rem;
          }
          span.type_star_left {
            font-family: "Microsoft YaHei";
          }
          span.type_comment {
            font-family: "Microsoft YaHei";
            margin-left:10px;
            font-size: .8rem;
            color: #666;

          }
        }
      }
    }
    }
    /*样式2*/
		   .tab2Content{
		   	background: forestgreen;
		   	height: 6rem;
		   	margin: 0 0 3% 3%;
		   	position: relative;
		   	& img{
		   		width: 100%;
		   		height: 100%;
		   	}
		   }
    	 .tab2ContentTxt{
    		color: #ffffff;
    		position: absolute;
    		bottom: 0;
    		text-align: center;
    		width: 100%;
    		height: 3rem;
    		line-height: 4rem;
        background-image: -webkit-linear-gradient(top,rgba(236,78,138,0)  0%,rgba(236,78,138,1)   100%);
    	}
</style>
